<template>
    <div style="width: 100%; border: 1px solid #eee;z-index: 99999;">
        <!-- 工具栏 -->
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
        /> 
        <!-- 编辑器 -->
        <Editor
          style="width: 100%; min-height: 350px; overflow-y: scroll;"
          :defaultConfig="editorConfig"
          v-model="myValue"
          @onChange="onChange"
          @onCreated="onCreated"
        />
      </div>
</template>
   
  <script>
      import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
      export default {
        name: "editor",
        props: {  
            value: {
                type: String,
                default: ''
            },
         },
        components: {Editor, Toolbar },
        data() {
            return {
                myValue: this.value,
                editor: null,
                toolbarConfig: {
                    // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                    // excludeKeys: [ /* 隐藏哪些菜单 */ ],
                },
                editorConfig: {
                    placeholder: "",
                    autoFocus: true,
                    // 所有的菜单配置，都要在 MENU_CONF 属性下
                    MENU_CONF: {
                        uploadImage: {
                            server: process.env.VUE_APP_BASE_API + "/editor/upload",
                            fieldName: "file",
                            maxFileSize: 10 * 1024 * 1024 // 5M
                        },
                        uploadVideo: {
                            server: process.env.VUE_APP_BASE_API + "/editor/upload",
                            fieldName: "file",
                            maxFileSize: 20 * 1024 * 1024, // 10M
                            maxNumberOfFiles: 1
                        },
                    },
                },
            }
          },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },
            onChange(editor) {
                this.$emit("input", editor.getHtml());
            },
          },
          watch: {
             value(newValue) {
                this.myValue = newValue;
                },
            //   myValue(newValue) {
            //     this.$emit("input", newValue);
            // }
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
      }
  </script>
  <style src="@wangeditor/editor/dist/css/style.css"></style>